<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <h3>商品列表</h3>
    <el-table
            :data="arr"
            style="width: 100%">
        <el-table-column
                type="index"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="title"
                label="商品"
                width="180">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格"
                width="180">
        </el-table-column>
        <el-table-column
                prop="num"
                label="库存"
                width="180">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr: [{title: "联想笔记本", price: 5000, num: 100},
                    {title: "戴尔显示器", price: 800, num: 200},
                    {title: "冰红茶", price: 3, num: 5000}]
            }
        },
        methods: {
            handleDelete(i, e) {
                v.arr.splice(i, 1);
                v.$message(e.title + "被删除!");
            }
        }
    })
</script>
</html>